import React from 'react';
import { Button } from 'antd';
import {
  MinusOutlined,
  BorderOutlined,
  CloseOutlined,
  BulbOutlined,
} from '@ant-design/icons';
import './BaseHeader.css';
import { ipcWindow } from '../../ipc/ipc';
import { envBuildTarget } from '../../ipc/env';

const BaseHeader: React.FC<{ className?: string }> = ({ className }) => (
  <div className={`title-bar ${className || ''}`}>
    <div className="el-menu-style">
      <span
        style={{ fontSize: 20, fontWeight: 'bold' }}
        className="no-drag-div"
      >
         {envBuildTarget()}
      </span>
    </div>
    <div className="right-controls no-drag-div">
      <Button
        type="text"
        icon={<BulbOutlined />}
        onClick={() => document.body.classList.toggle('dark')}
        title="切换主题"
        className="menu-button"
      />
      <Button
        type="text"
        icon={<MinusOutlined />}
        onClick={ipcWindow.minimize}
        title="最小化"
        className="menu-button"
      />
      <Button
        type="text"
        icon={<BorderOutlined />}
        onClick={ipcWindow.toggleMaximize}
        title="最大化/还原"
        className="menu-button"
      />
      <Button
        type="text"
        icon={<CloseOutlined />}
        onClick={ipcWindow.close}
        title="关闭"
        className="menu-button"
      />
    </div>
  </div>
);

export default BaseHeader;
